<template>
  <div class="components-container">
    <div class="header-form">
      <label class="layui-form-label">寄存区域</label>
      <div class="layui-inline">
        <el-select v-model="icaSelectIndex" placeholder="请选择" @change="getAssData">
          <el-option v-for="item in areaTypes" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="layui-inline">
        <el-button type="primary" @click="getAssData">刷新</el-button>
      </div>
      <div class="layui-inline" style="line-height:40px;margin-left:300px;">
          <div style="float:right;">
            <div style="width:30px;height:20px;background:#eb9e05;float:right;margin-top:10px;border-radius:5px;"></div>
            <span style="float:right;">已存入</span>
          </div>
          <div style="float:right;margin-right:20px;">
            <div style="width:30px;height:20px;background:#67c23a;float:right;margin-top:10px;border-radius:5px;"></div>
            <span style="float:right;">未存入</span>
          </div>
           <div style="float:right;margin-right:20px;">
            <div style="width:30px;height:20px;background:#878d99;float:right;margin-top:10px;border-radius:5px;"></div>
            <span style="float:right;">没有寄存堂</span>
          </div>
      </div>
    </div>
    <!-- 寄存堂图 -->
    <div v-if="isTableIce === 0" class="tableContainer" style="position: relative">
      <div v-for="y in iceAreaItem.ASAYCOUNT" :style="{width:iceAreaItem.ASAXCOUNT*left+'px',height:top}" style="clear:left">
        <div v-for="x in iceAreaItem.ASAXCOUNT" class="iceplace iceplacedefault"></div>
      </div>
      <ul class="tableIceArea">  
        <li v-for="(item, index) in AssAreaInfo" :style="{left: (left*(item.ASSXP-1)) + 'px', top: (top*(item.x-item.ASSYP)) + 'px' }" style=" position: absolute;">
          <div class="listCenter" :class="setDivClass(item)">
            <p v-text="item.ASSNO" class="itemNo">0</p>
            <div class="iceName">
              {{item.REGNAME}}
            </div>
            <div class="tableToolList">
              <ul class="tableTool">
                <li class="saveBtn" @click="operate(OPEARTCODE.CR,item)" v-if=" item.AssUse.length == 0 ">始</li>  
                <li class="takeBtnEnadble" v-else>始</li>
                <li class="takeBtn" @click="operate(OPEARTCODE.QC,item)" v-if=" item.AssUse.length != 0 ">终</li>
                <li class="takeBtnEnadble" v-else>终</li>
                <li class="moreBtn">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                                              ...
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <div v-if="item.AssUse.length != 0">
                        <el-dropdown-item @click.native="operate(OPEARTCODE.XC,item)">续存</el-dropdown-item>
                        <el-dropdown-item @click.native="operate(OPEARTCODE.DELETE,item)">删除</el-dropdown-item>
                        <el-dropdown-item @click.native="operate(OPEARTCODE.INFO,item)">详情</el-dropdown-item>
                      </div>
                      <div v-else>
                        <el-dropdown-item class="linkdisable">续存</el-dropdown-item>
                        <el-dropdown-item class="linkdisable">删除</el-dropdown-item>
                        <el-dropdown-item class="linkdisable">详情</el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 功能列表 -->
    <div>
      <ul class="toolList">
        <li v-if="btnShow(item.BTNVALUE)" v-for="(item, index) in $store.state.btnListCommon" @click="operate(item.BTNVALUE)">
          <el-button type="primary" :value="item.BTNSHOWNAME" v-text="item.BTNSHOWNAME"></el-button>
        </li>
      </ul>
    </div>
    <!-- 数据列表 -->
    <dataTable v-if="isTableIce === 1" :headList="headList" :dataList="dataList" :pageOrder="pageOrder"  @pageChange="pageChange" @selectRow="selectRow"></dataTable>
    <!-- 操作弹窗 -->
    <main-model ref="dialog" @refreshData="getAssData"></main-model>
  </div>
</template>

<script>
import dataTable from "@/components/Table/DataTable";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import mainModel from "./assUseMain";
import {
    manage
  } from "@/mixins/managePage.js";
const REG = "登记";
const INFO = "详情";
const IN = "存入";
const OUT = "取出";
const DELETE = "删除";
const XC =  "使用续存";
export default {
  name: "AssUse",
  mixins: [manage],
  data() {
    return {
      OPEARTCODE: {
        CR: "存入",
        QC: "取出",
        MODIFY: "修改",
        XC: "使用续存",
        DELETE: "删除",
        INFO: "详情"
      },
      title: null,

      left: "160",
      top: "140",
      icaSelectIndex: null,
      iceAreaItem: {
        ICAID: null
      },
      AssAreaInfo: [], //获取寄存区域的寄存堂及使用信息
      
     
    
      ashid: null,
      AssUse: [], //取出  业务编号
      areaTypes: [],
      // 是否是图型化
      isTableIce: null,
      //分页和排序
      pageOrder: {
        orderType: null,
        orderSort: null,
        totalNum: null,
        pageSize: 10,
        currentPage: 1
      },
    };
  },
  methods: {
    //获取表头（表格）
      getlinColumn() {
        apiBase.DoService({},
          apiBase.getApiAdress().Column.GetIceUseTableColumns,
          res => {
            this.headList = res.data.content;
          }
        );
      },
    // 按钮显示
    btnShow(index){
      switch (index) {
        case REG:
        case IN:
          return true;
          break;
        case '修改':
          return true;
          break;
        case OUT:
          return this.currentRow !== null
          break;
        case INFO:
        case DELETE:
          return this.currentRow !== null
          break;
      }
    },
    //功能操作
    operate(order, ass) {
      if(this.isTableIce === 1){
        ass = this.currentRow;
      }
      this.order = order;
      switch (this.order) {
        case REG:
        case IN:
          this.$refs.dialog.open('开始使用', ass);
          break;
        case OUT:
          this.$refs.dialog.open('结束使用', ass);
          break;
        case INFO:
          this.$refs.dialog.open(this.order, ass);
          break;
        case XC:
          this.$refs.dialog.open(this.order, ass);
          break;
        case '修改':
          this.$refs.dialog.open(this.order, ass);
          break;
        case DELETE:
        if(ass.ASHID == undefined){this.dataDelete(ass.AssUse[0].ASHID); }
        else{this.dataDelete(ass.ASHID);}
          break;
        default:
          break;
      }
    },
    // 删除
    dataDelete(id) {
        this.$confirm("此操作将永久删除该骨灰堂使用信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(callback => {
          var data = {
            ASHID: id
          };
          apiBase.DoService(
            data,
            apiBase.getApiAdress().AshesUse.Delete,
            res => {
              this.getAssData();
              this.$message({
                message: res.data.msg,
                type: "success"
              });
            });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
    // 获取ashid
    GetIchInfo(item) {
      let data = {
        ASHASSID: item.ASSID,
        REGBUSNUM: item.AssUse[0].REGBUSNUM
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().AshesUse.GetRegistrationAndUseByNo,
        res => {
          if(res.data.content.ASH){
            item.ASHID = res.data.content.ASH.ASHID;
          }
        }
      );
    },
    //获取位置类别
    getIceArea() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Ashes.QueryAshesArea,
        res => {
          let assTypeData = res.data.content.OutData,
            legendsUsersData = assTypeData.map(item => ({
              label: item.ASANAME,
              value: item.ASAID,
              ASAXCOUNT: item.ASAXCOUNT,
              ASAYCOUNT: item.ASAYCOUNT
            }));
          this.areaTypes = legendsUsersData;
          this.icaSelectIndex = this.areaTypes[0].value;//默认寄存区域
          this.getAssData();
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //获取冰柜区域的冰柜及使用信息
    getAssData() {
      if (
        this.icaSelectIndex === null ||
        this.areaTypes === undefined ||
        this.areaTypes.length == 0
      )
        return;
        for(var i = 0;i < this.areaTypes.length;i++){
          if(this.areaTypes[i].value === this.icaSelectIndex){
            this.iceAreaItem = this.areaTypes[i];
          }
        }
      var data = {
        //请求体
        PageIndex: this.pageOrder.currentPage,
        PageSize: this.pageOrder.pageSize,
        OrderBy: this.pageOrder.orderType,
        OrderByType: this.pageOrder.orderSort,
        ASAID: this.icaSelectIndex,
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().AshesUse.QueryAssUseByArea, 
        res => {  
          this.AssAreaInfo = res.data.content.List_Asa;
          this.AssAreaInfo.forEach((item, index) => {  
            item.x = res.data.content.ASAYCOUNT;
            if (item.AssUse !== undefined && item.AssUse.length > 0){
              // this.GetIchInfo(item);
              // setTimeout(() => {
              //   item.ASHID = this.ashid;
              // }, 200);
              item.REGNAME = item.AssUse[0].REGNAME;
              item.REGID = item.AssUse[0].REGID;
            } else item.REGNAME = "";
          });
        }
      );
    },
    // 控制样式的
    setDivClass(Ass) {
      if (Ass === undefined) return "";
      if (Ass.AssUse === null || Ass.AssUse.length == 0)
        return "iceplace iceplaceCanuse";
      else if (Ass.AssUse.length == 1) return "iceplace iceplaceUseed";
      else if (Ass.AssUse.length > 1) return "iceplace iceplaceMoreUseed";
    }
  },
  mounted() {
    // setTimeout(() => {
    //   if(this.areaTypes){
    //     this.icaSelectIndex = this.areaTypes[0].value;
    //   }
    //   this.getAssData();
    // }, 100);
  },
  activated(){
    this.getIceArea();
  },
  watch: {
    '$route.path': function (newVal, oldVal) {
    if (newVal === '/assUseImage') {
      this.getAssData();
    }
    }
  },
  created() {
    this.getIceArea();
    apiBase.DoService({}, apiBase.getApiAdress().Param.GetIsTableIce, res => {
      this.isTableIce = res.data.content;
      if(this.isTableIce === 1){
        this.getlinColumn()
      }
    });
  },
  components: {
    mainModel,
    dataTable
  }
};
</script>

<style lang="less" scoped>
.longtext {
  width: 465px;
}
.btnCenter {
  text-align: center;
}
table.tableIfon {
  th {
    font-weight: normal;
  }
  td {
    text-align: left;
    padding-right: 20px;
  }
}
select::-ms-expand {
  //ie下啦箭头隐藏
  display: none;
}
select.nameOptions {
  width: 100px;
  display: inline-block;
  margin-right: 10px;
  background: transparent;
  border: none;
  box-shadow: inset 0 0px 0px rgb(255, 255, 255);
  margin: auto;
  display: block;
  text-align-last: center;
}
.datepicker-popup {
  position: fixed !important;
}
table.iceTable {
  width: 100%;
  td {
    width: 50px;
    height: 200px;
    border: 1px solid #dcdcdc;
  }
}
div.tableContainer {
  width: 100%;
  max-height: 650px;
  overflow: auto;
  margin-top: 20px;
  ul.tableIceArea {
    overflow: hidden;
    width: 100%;
    height: 100%;
    li {
      width: 150px;
      height: 130px;
      div.listCenter {
        p.itemNo {
          text-align: center;
          padding-top: 15px;
          font-size: 18px;
          color: white;
          font-weight: bold;
        }
        div.iceName {
          height: 40px;
          width: 100%;
          text-align: center;
          padding-top: 15px;
          font-size: 18px;
          color: white;
          font-weight: bold;
        }
        div.tableToolList {
          overflow: hidden;
          ul.tableTool {
            width: 90px;
            margin: 10px auto 0;
            overflow: hidden;
            height: 30px;
            li {
              float: left;
              width: 30px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              padding: 0;
              margin: 0;
              cursor: pointer;
              position: inherit;
            }
            li.saveBtn {
              background: #009289;
              color: white;
            }
            li.takeBtn {
              // background: #eaeaea;
              background: #ff2021;
              color: white;
            }
            li.takeBtnEnadble {
              // background: #eaeaea;
              background: #eef1f6;
              color: #878d99;
              cursor: not-allowed;
            }
            li.moreBtn {
              background: #ef9000;
              color: white;
              span.el-dropdown-link {
                color: white;
              }
            }
          }
        }
      }
    }
  }
}
.linkdisable {
  background: #eef1f6;
  color: #878d99;
  cursor: not-allowed;
}
.iceplace {
  margin: 5px;
  width: 150px;
  height: 130px;
  float: left;
}
.iceplacedefault {
  background-color: #878d99;
}
.iceplaceCanuse {
  background-color: #67c23a;
}
.iceplaceUseed {
  background-color: #eb9e05;
}
.iceplaceMoreUseed {
  background-color: #fa5555;
}
</style>
